<template>
  <div class="page-container">
    <el-card>
      <el-row
        :gutter="20"
        class="mb-2"
      >
        <el-col :span="6">
          <el-input
            v-model="search"
            placeholder="搜索用户名/学号"
            clearable
            @clear="onSearch"
            @keyup.enter="onSearch"
          />
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="statusFilter"
            placeholder="状态筛选"
            clearable
            @change="onSearch"
          >
            <el-option
              label="全部"
              value=""
            />
            <el-option
              label="正常"
              value="正常"
            />
            <el-option
              label="禁用"
              value="禁用"
            />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button @click="exportUsers">
            导出数据
          </el-button>
        </el-col>
      </el-row>
      <el-table
        :data="filteredUsers"
        style="width: 100%"
        @selection-change="onSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="username"
          label="用户名"
        />
        <el-table-column
          prop="studentId"
          label="学号"
        />
        <el-table-column
          prop="status"
          label="状态"
        />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              @click="toggleUser(scope.row)"
            >
              {{ scope.row.status === '正常' ? '禁用' : '启用' }}
            </el-button>
            <el-button
              size="small"
              @click="showDetail(scope.row)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="mt-2">
        <el-col :span="12">
          <el-button
            type="danger"
            :disabled="!multipleSelection.length"
            @click="batchDisable"
          >
            批量禁用
          </el-button>
        </el-col>
        <el-col
          :span="12"
          style="text-align: right"
        >
          <el-pagination
            v-model:current-page="page"
            background
            layout="prev, pager, next"
            :total="filteredUsers.length"
            :page-size="5"
          />
        </el-col>
      </el-row>
    </el-card>
    <el-dialog
      v-model="detailDialog"
      title="用户详情"
    >
      <el-descriptions :column="1">
        <el-descriptions-item label="用户名">
          {{ detail.username }}
        </el-descriptions-item>
        <el-descriptions-item label="学号">
          {{ detail.studentId }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          {{ detail.status }}
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailDialog = false">
          关闭
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
export default { name: 'UserManagementPage' }
</script>

<script setup lang="ts">
import { ref, computed } from 'vue'
const users = ref([
  { username: '张三', studentId: '2023001', status: '正常' },
  { username: '李四', studentId: '2023002', status: '禁用' },
  { username: '王五', studentId: '2023003', status: '正常' }
])
const search = ref('')
const statusFilter = ref('')
const page = ref(1)
const multipleSelection = ref([])
const detailDialog = ref(false)
const detail = ref({ username: '', studentId: '', status: '' })
const filteredUsers = computed(() => {
  let data = users.value
  if (search.value) {
    data = data.filter(u => u.username.includes(search.value) || u.studentId.includes(search.value))
  }
  if (statusFilter.value) {
    data = data.filter(u => u.status === statusFilter.value)
  }
  const start = (page.value - 1) * 5
  return data.slice(start, start + 5)
})
function onSearch() { page.value = 1 }
function toggleUser(row: any) {
  row.status = row.status === '正常' ? '禁用' : '正常'
}
function onSelectionChange(val: any) {
  multipleSelection.value = val
}
function batchDisable() {
  multipleSelection.value.forEach((u: any) => { u.status = '禁用' })
  multipleSelection.value = []
}
function exportUsers() {
  const data = JSON.stringify(users.value, null, 2)
  const blob = new Blob([data], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'users.json'
  a.click()
  URL.revokeObjectURL(url)
}
function showDetail(row: any) {
  detail.value = { ...row }
  detailDialog.value = true
}
</script>

<style scoped>
.page-container { padding: 24px; }
.mb-2 { margin-bottom: 16px; }
.mt-2 { margin-top: 16px; }
</style> 